<template>
	<view class="proitem">
		<image :src="URL(item.image)" class="proitem__pic" mode="aspectFill"></image>
		<view class="proitem__info">
			<view class="proitem__info__name tn-text-ellipsis">
				{{item.name}}
			</view>
			<view class="tn-flex tn-flex-col-center">
				<view class="proitem__info__price">
					 <text style="font-size: 24rpx;">￥</text>{{item.price}}
				</view>
				<view class="proitem__info__oldprice">
					￥{{item.oldprice}}
				</view>
			</view>
			<view class="tn-flex tn-flex-col-center">
				<view class="proitem__info__tip">
					库存{{item.num}}
				</view>
				<view class="proitem__info__tip tip1">
					销量{{item.salenum}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		name:"product-item",
		props:{
			item:{
				type:Object,
				default:{
					
				}
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.proitem{
	border-radius:30rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
	&__pic{
		width: 346rpx;
		height: 346rpx;
		background: #FFFFFF;
		
	}
	&__info{
		padding: 20rpx 18rpx 18rpx;
		background-color: #fff;
		width: 346rpx;
		&__name{
			font-family: PingFang SC;
			font-weight: 800;
			font-size: 28rpx;
			color: #181818;
			line-height: 28rpx;
			margin-bottom: 30rpx;
		}
		&__price{
			font-family: DINNextLTPro-Bold;
			font-weight: bold;
			font-size: 31rpx;
			color: #FD3C33;
			line-height: 31rpx;
			margin-right: 12rpx;
		}
		&__oldprice{
			font-family: DINNextLTPro-Bold;
			font-weight: bold;
			font-size: 22rpx;
			color: #919191;
			line-height: 22rpx;
			text-decoration-line: line-through;
		}
		&__tip{
			padding: 8rpx;
			background: rgba(69, 196, 123, .1);
			border-radius: 5rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #45C47B;
			line-height: 20rpx;
			margin-top: 16rpx;
		}
		.tip1{
			color: #45C47B;
			margin-left: 8rpx;
		}
	}
}
</style>